<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
计算属性computed的完整写法
computed:{
    属性值:{
        get(){
            处理逻辑
            返回结果
        }
        set(val) {
            修改逻辑
        }
    }
}
-->

<body>
    <div id="app">
        <div>
            <label>姓：</label>
            <input type="text" v-model.trim="firstName">
            <label>名：</label>
            <input type="text" v-model.trim="lastName">
            {{ name }}
            <hr>
            <input type="text" v-model.trim="ch">
            <button v-on:click="changeName">改名</button>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '',
                lastName: '',
                ch: ''
            },
            methods: {
                changeName() {
                    this.name = this.ch
                }
            },
            computed: {
                // 原始写法 相当于只有get()方法 ，没有set(),在方法中设置这个计算属性的时候会报错，就需要写计算属性的完整写法
                // name:{
                //     return this.firstName+this.lastName
                // }

                name: {
                    get() {
                        return this.firstName + this.lastName
                    },
                    // 当name属性被修改赋值时就会触发这个方法
                    set(newName) {
                        if (newName !== '') {
                            // slice 截取
                            this.firstName = newName.slice(0, 1)
                            this.lastName = newName.slice(1)
                        }
                    }
                }
            }
        })
    </script>

</body>

</html>